<template>
  <!-- 组件思想化，把一个完整的页面，拆分成一个个小组件 -->
  <!-- template 结构部分写插值是语法{{}} -->
  <!-- 组件解构 有且只有一个div元素-->
  <div>
    <div class="user">{{ user }}</div>
    <div class="name">我是练习俩年半的{{ ikun.name }}</div>
    <div class="age">今年{{ ikun.age / 2 }}岁</div>
    <div class="aiHao">
      我的爱好是{{ ikun.age > 30 ? ikun.aiHao : '露出鸡脚' }}
    </div>
  </div>
</template>

<!-- script行为部分，写js代码 -->
<script>
export default {
  // name: "",
  // components: {},
  // props: {},
  data() {
    return {
      user: '姬霓太美',
      ikun: {
        name: '偶像练习生咯咯哒',
        age: 32,
        aiHao: '唱,跳,rop,篮球',
      },
    }
  },
  // computed: {},
  // watch: {},
  // created() {},
  // methods: {}
}
</script>

<!-- style样式部分写css代码 -->
<!-- less在脚手架内部已经配好了设置 -->
<!-- 但是不会脚手架不会帮你安装这个less-loader这个包 -->
<!-- 所以需要手动下载这个包 npm i less-loader@7.2.1 less-D -->
<style lang="less">
.user {
  color: blue;
}
.name {
  color: blueviolet;
}
.age {
  color: chartreuse;
}
.aiHao {
  color: crimson;
}
</style>
